<template>
  <div style="width:100%;height:100%;display: flex">
    <div class="left">
      <div class="login-box">
        <h1 style="text-align: center;">Create Your Account</h1>
        <input type="text" class="input" placeholder="Enter your username">
        <input type="text" class="input" placeholder="Enter your password">
        <button class="login-button" @click="Register()">
          SIGN UP
        </button>
      </div>
    </div>

    <div class="right">
      <div class="welcom">
        <span style="margin-left: 30px;font-size: 36px;color:white;">Welcome Back! </span>
        <div
            style=" margin-top: 60px; width: 304px; height: 65px;  text-align: center; color: #FAF9F7; font-size: 20px;
            font-family: Montserrat; font-weight: 500; line-height: 32px; letter-spacing: 0.20px; word-wrap: break-word">
          To keep connected with us please sign in
        </div>
        <button class="sign-button" @click="gotoLogin()">LOGIN</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const Register = async() => {

}
const gotoLogin = () => {
  router.push({path: '/login'})
}
</script>

<style scoped>
.left {
  width:70%;
  height:100%;
  display: inline-block;
  background: #FAF9F7;
  /*display: inline-block;*/
  display: flex;
  align-items: center;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
}
.right {
  width:30%;
  height:100%;
  background-color: #119C59;
  display: inline-block;
  display: flex;
  align-items: center;
}
.login-box {
  margin-left: 20%;
  width:35%;
  border: #119C59;
  margin:0 auto;
  /*border: 1px solid black;*/
  margin-bottom: 20%;
}
.input {
  border:0;
  background-color: #FAF9F7;
  border-bottom: 6px solid #888888;
  width:100%;
  height:50px;
  margin-top: 70px;
  font-size: 18px;
  color:#52575C;
  padding-left: 20px;
}
.input:focus {
  outline: none;
}
.input::-webkit-input-placeholder {
  text-indent: 30px;
}
.input:focus::placeholder {
  transform: scale(0.8) translateY(-100%);
  text-indent: 0px;
}
.input:focus {
  border-bottom: 6px solid #119C59;
}
.login-button {
  color:white;

  font-weight: bold;
  margin-top: 40px;
  background-color: #119C59;
  width:100%;
  height:60px;
  border-radius: 50px;
  border:0;
}
.welcom {
  margin:0 auto;
  margin-bottom: 15%;
}
.sign-button {
  margin-top: 30px;
  background-color: #119C59;
  color:white;
  border-radius: 50px;
  height:70px;
  border: 2px solid white;
  width:80%;
  margin-left: 10%;
}
</style>
